<template>
    <div>
        <!-- <router-link to="/Home/orderSettlement">结算</router-link> -->
        <div class="header">
            <input v-model="Search.nfuhTotalorder.totalorderNumber" placeholder="请输入订单号">
            <el-select v-model="Search.nfuhTotalorder.totalorderTstStatus" slot="prepend" placeholder="请选择">
                <el-option label="待支付" value="1"></el-option>
                <el-option label="已完成" value="2"></el-option>
            </el-select>
            <el-date-picker v-model="Search.payTime" type="daterange" start-placeholder="开台时间" end-placeholder="开台时间"
                :default-time="['00:00:00', '23:59:59']">
            </el-date-picker>
            <!-- {{select}} -->
            <button @click="aearch(Search)">搜索</button>
        </div>
        <div class="contenter">
            <div v-for="item in list" :key="item.id">
                <div class="con-head">
                    订单号：{{item.totalorderNumber}} <span>总金额: ￥{{item.totalAmount}}</span>
                    <span> 开台时间: {{item.totalorderStarttime}}</span> <span>房间号: {{item.totalorderRoomNum}}</span>
                    <span>服务人员: {{item.serveNumber}}</span> <span>开台人: {{item.totalorderCustomer}} </span>
                    <span>{{item.isPay}} </span>
                </div>
                <div class="con-con">
                    <div class="con-l">
                        <el-table :data="item.nfuhOrderList" style="width: 100%">
                            <el-table-column prop="orderServicetype" label="项目" width="90">
                            </el-table-column>
                            <el-table-column prop="orderNumber" label="数量" width="90">
                            </el-table-column>
                            <el-table-column prop="orderPrice" label="原价" width="90">
                            </el-table-column>
                            <el-table-column prop="orderPrice" label="优惠价格" width="100">
                            </el-table-column>
                            <el-table-column prop="orderTechnician" label="技师" width="100">
                            </el-table-column>
                            <el-table-column prop="orderLastClocktime" label="上钟时间" width="150">
                            </el-table-column>
                            <el-table-column prop="orderNextClocktime" label="下钟时间" width="110">
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="con-r">
                        <div>
                            <span @click="aa(item.id)">查看</span>
                            <router-link to="/Home/settlement" > <button v-if="item.totalorderTstStatus=='待支付' " @click="aa(item.id)">{{isPay(item)}}</button> </router-link>
                           <span class="ac" v-if="item.totalorderTstStatus=='已完成'">{{isPay(item)}}</span> 

                        </div>
                    </div>

                </div>
            </div>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="startpage" :page-sizes="[3, 5,7,9]" :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>

        </div>

    </div>
</template>

<script>
    import {
        createNamespacedHelpers
    } from 'vuex'
    const {
        mapActions,
        mapState,
        mapMutations
    } = createNamespacedHelpers('order')
    export default {
        data() {
            return {
                cc:false,
                num1: 1,
                num2: 2,
                Search: {
                    nfuhTotalorder:{
                          totalorderNumber: '',
                           totalorderTstStatus: '',
                    },
                    payTime: [],
                    page:1,
                    limit:5
                },

                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                },
            }
        },
        computed: {
            ...mapState(['pagesize', 'startpage', 'total', 'pagesize', 'list']),

        },
        // watch:{
        //     pagesize(){
        //         this.getpaging()
        //         console.log(1);
        //     }
		// },
        mounted() {
            this.getpaging()
           
        },
        methods: {
            ...mapMutations(['setCurrentPage', 'setPageSize']),
            ...mapActions(['getpaging', 'getDataById', 'search']),
            handleSizeChange(val) {
                this.setPageSize(val)
                this.getpaging(val)
            },
            handleCurrentChange(val) {
                 this.setCurrentPage(val)
                    this.getpaging(val)
            },
            aa(id) {
                this.getDataById(id)
                   this.$router.push('/Home/orderSettlement');

            },
           async aearch(Search){
                await this.search(Search)
            },
            isPay(item){
                // console.log(item.totalorderTstStatus);
                if(item.totalorderTstStatus=='已完成'){
                     this.cc=true
                    return '已付款'
                   
                }else{
                    this.cc=false
                    return '结算'
                }
            }
        }
    }
</script>

<style lang="scss" scoped src="../../css/order/orderList.scss"></style>